<template>
  <div class="setting">
    <el-row :gutter="20" class="first-col">
      <el-col :offset="1">摄像头设置</el-col>
    </el-row>
    <el-divider></el-divider>
    <span style="padding-left: 30px">
      开/关摄像头
    </span>
    &nbsp;&nbsp;
    <el-switch v-model="open" />
    <!-- <div class="timeRange">
      <span>定时运行</span>&nbsp;&nbsp;
      <el-time-select
          v-model="startTime"
          :max-time="endTime"
          class="mr-4"
          placeholder="Start time"
          start="00:00"
          step="00:30"
          end="24:00"
      />
      &nbsp;&nbsp;
      <el-time-select
          v-model="endTime"
          :min-time="startTime"
          placeholder="End time"
          start="00:00"
          step="00:30"
          end="24:00"
      />
    </div> -->
    <div class="slider-demo-block">
      <span class="demonstration">拍摄间隔</span>
      <el-slider v-model="space1" :step="1" max="30" :disabled="!open" />
    </div>
    <div class="slider-demo-block">
      <span class="demonstration">LED灯亮度</span>
      <el-slider v-model="space2" :step="1" max="255" :disabled="!open" />
    </div>
  </div>
</template>

<style scoped>
.setting {
  margin-left: 260px;
  margin-top: 70px;
  width: 700px;
  height: 400px;
  box-shadow: 0 2px 4px 2px rgb(22, 223, 231);
  border-radius: 4px;
  font-family: "HarmonyOS Sans SC";
  font-size: large;
}

.first-col {
  padding-top: 20px;
}

.timeRange {
  padding-left: 30px;
  padding-top: 20px;
}

.setting.dark {
  box-shadow: 0 2px 4px rgb(255, 255, 255);
}

.slider-demo-block {
  display: flex;
  align-items: center;
  padding-left: 30px;
  padding-top: 10px;
}

.slider-demo-block .el-slider {
  margin-top: 5px;
  margin-right: 160px;
}

.slider-demo-block .demonstration {
  line-height: 60px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}

.slider-demo-block .demonstration+.el-slider {
  flex: 2 0 30%;
}
</style>

<script>
import { ElMessage } from "element-plus";
import { mapState } from 'vuex';
import { mapMutations } from 'vuex';

export default {
  data() {
    return {
      loading1: false,
      value: true,
      startTime: '',
      endTime: '',
      space1: 0,
      space2: 100000,
      open: false,
      interval: 100000,
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    this.open = this.user.open
    this.space1 = this.user.interval
    this.space2 = this.user.led
  },
  methods: {
    ...mapMutations(['setUserOpen', 'setUserInterval', 'setUserLED']),
  },
  watch: {

    open(newVal, oldVal) {
      // console.log("old "+oldVal)
      // console.log("new "+newVal)
      if (oldVal == false) {
        this.$api.cameraApi.setCamera(1, this.user.ip)
          .then(res => {
            res = res.data
            console.log("---")
            console.log(res.code)
            if (res.code == 200) {
              this.open = true;
              this.setUserOpen(this.open);
            } else {
              // 不成功，什么也不做哈哈
            }
          })
          .catch(err => {
            console.log("请求失败")
          })
      } else {
        this.$api.cameraApi.setCamera(-1, this.user.ip)
          .then(res => {
            res = res.data
            console.log("---")
            console.log(res.code)
            if (res.code == 200) {
              this.open = false;
              this.setUserOpen(this.open);
              this.space2 = 0;
              this.setUserLED(0)
            } else {
              // 不成功，什么也不做哈哈
            }
          })
          .catch(err => {
            console.log("请求失败")
          })
        //
      }
      this.$api.cameraApi.setLED(0, this.user.ip)
          .then(res => {
            res = res.data
            console.log("---")
            console.log(res.code)
            if (res.code == 200) {
              // this.open=false;
              // this.setUserOpen(this.newVal);
              this.space2 = 0;
              this.setUserLED(0)
            } else {
              // 不成功，什么也不做哈哈
            }
          })
          .catch(err => {
            console.log("请求失败")
          })
        this.user.led=0;
        this.space2=0;

    },
    space1(newVal, oldVal) {
      if (this.open == true) {
        let interval = newVal * 1000;
        this.$api.cameraApi.setInterval(interval, this.user.ip)
          .then(res => {
            res = res.data
            console.log("---")
            console.log(res.code)
            if (res.code == 200) {
              // this.open=false;
              this.setUserInterval(newVal);
            } else {
              // 不成功，什么也不做哈哈
            }
          })
          .catch(err => {
            console.log("请求失败")
          })
      }

    },
    space2(newVal, oldVal) {
      if (this.open == true) {


        this.$api.cameraApi.setLED(newVal, this.user.ip)
          .then(res => {
            res = res.data
            console.log("---")
            console.log(res.code)
            if (res.code == 200) {
              // this.open=false;
              // this.setUserOpen(this.newVal);
              this.setUserLED(newVal)
            } else {
              // 不成功，什么也不做哈哈
            }
          })
          .catch(err => {
            console.log("请求失败")
          })
      }
    }

  }
};

</script>